<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="content">
        <span id="span">start</span>
        <button id="btn">1</button>>
    </div>

    <script>
        var hero = [{
            heroName: 'zhangsan1',
            heroSkill: '一等奖'
            
        }, {
            heroName: 'zhangsan2',
            heroSkill: '二等奖'
        }, {
            heroName: 'zhangsan3',
            heroSkill: '三等价'
        }, {
            heroName: 'zhangsan4',
            heroSkill: '谢谢参与'
        }]
        var spanDom = document.querySelector('#span')
        var btnDom = document.querySelector('#btn')
        var imgDom = document.querySelector('#img')
        var timer = null;

        btnDom.onclick = function () {
            if (btnDom.innerHTML == 1) {
                timer = setInterval(function () {

                    btnDom.innerHTML = '结束'
                    var res = ''
                    var index = makeRandom(hero.length, 0, false)
                    res += `<li>
                        <h3>${hero[index].heroName}</h3>
                        <h3>${hero[index].heroSkill}</h3>
                        </li>`
                    spanDom.innerHTML = res;
                    /*    imgDom.src = "../day01/课堂代码/img" + index + ".JGP" */
                }, 300)
            }
            else {
                btnDom.innerHTML = 1
                clearInterval(timer)
            }

        }



        function makeRandom(max, min, hasEnd = true) {
            return Math.floor(Math.random() * (max - min + (hasEnd ? 1 : 0)) + min)
        }
    </script>
</body>

</html>